import { useEffect, useRef, useState } from "react";

const Canvas = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const requestRef = useRef(0);
  const animationRef = useRef({
    circleX: 450,
    circleY: 300,
    radius: 30,
    dx: 2,
  });
  const [isAnimating, setIsAnimating] = useState(false);
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;
    canvas.width = 600;
    canvas.height = 400;
    draw(ctx);
    return () => {
      cancelAnimationFrame(requestRef.current);
    };
  }, []);

  const draw = (ctx: CanvasRenderingContext2D) => {
    // 绘制矩形1
    // ctx.fillStyle = "blue";
    // ctx.fillRect(50, 50, 200, 100);
    // // 绘制矩形2
    // ctx.strokeStyle = "red";
    // ctx.lineWidth = 5;
    // ctx.strokeRect(300, 50, 80, 80);
    // // 绘制路径
    // ctx.beginPath();
    // ctx.moveTo(50, 200);
    // ctx.lineTo(150, 250);
    // ctx.lineTo(50, 300);
    // ctx.closePath();
    // ctx.fillStyle = "green";
    // ctx.fill();
    // ctx.stroke();
    // 绘制圆形1
    // ctx.beginPath();
    // ctx.arc(300, 200, 50, 0, Math.PI * 2);
    // ctx.fillStyle = "purple";
    // ctx.fill();
    // 绘制圆形2
    // ctx.beginPath();
    // ctx.arc(300, 200, 70, 0, Math.PI);
    // ctx.strokeStyle = "orange";
    // ctx.lineWidth = 3;
    // ctx.stroke();
    // 绘制文本
    ctx.font = "24px Arial";
    ctx.fillStyle = "black";
    ctx.fillText("Hello Canvas", 150, 150);
    ctx.strokeText("Stroke Text", 150, 180);
  };

  const toggleAnimation = () => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;
    if (isAnimating) {
      cancelAnimationFrame(requestRef.current);
    } else {
      animate(ctx);
    }
    setIsAnimating(!isAnimating);
  };

  const animate = (ctx: CanvasRenderingContext2D) => {
    ctx.clearRect(0, 0, 600, 400);
    const { circleX, circleY, radius, dx } = animationRef.current;
    ctx.beginPath();
    ctx.arc(circleX, circleY, radius, 0, Math.PI * 2);
    ctx.fillStyle = "red";
    ctx.fill();
    let newCircleX = circleX + dx;
    let newDx = dx;
    if (newCircleX + radius > 600 || newCircleX - radius < 0) {
      newDx = -dx;
      newCircleX = circleX + newDx;
    }
    animationRef.current = {
      ...animationRef.current,
      circleX: newCircleX,
      dx: newDx,
    };
    requestRef.current = requestAnimationFrame(() => animate(ctx));
  };

  const handleCanvasClick = (e: React.MouseEvent<HTMLCanvasElement>) => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const rect = canvas.getBoundingClientRect();
    const clickX = e.clientX - rect.left;
    const clickY = e.clientY - rect.top;
    console.log(clickX, clickY);
  };

  const resetAnimation = () => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;
    animationRef.current = {
      circleX: 450,
      circleY: 300,
      radius: 30,
      dx: 2,
    };
    ctx.clearRect(0, 0, 600, 400);
    const { circleX, circleY, radius } = animationRef.current;
    ctx.beginPath();
    ctx.arc(circleX, circleY, radius, 0, Math.PI * 2);
    ctx.fillStyle = "red";
    ctx.fill();
    setIsAnimating(false);
    cancelAnimationFrame(requestRef.current);
  };

  return (
    <>
      <canvas
        ref={canvasRef}
        onClick={handleCanvasClick}
        style={{ border: "1px solid #ccc" }}
      />
      <button onClick={toggleAnimation}>
        {isAnimating ? "停止动画" : "启动动画"}
      </button>
      <button onClick={resetAnimation}>重置动画</button>
    </>
  );
};

export default Canvas;
